<template>
  <div class="loading1">
    <section class="concentric-round"></section>
  </div>
  <div class="loading2">
    <section class="circle"></section>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { ref, watch } from 'vue'
const store = useStore()
const Color = ref(store.getters.mainColor)

// 监听数据变化
watch(
  () => store.getters.mainColor,
  (newVal) => {
    Color.value = newVal
  }
)

const colorRgba = function (color, opacity) {
  let sColor = color.toLowerCase()
  // 十六进制颜色值的正则表达式
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  // 如果是16进制颜色
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = '#'
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    // 处理六位的颜色值
    var sColorChange = []
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return 'RGB(' + sColorChange.join(',') + ',' + opacity + ')'
  }
  return sColor
}
const RgbaColor = colorRgba(Color.value, 0.4)
</script>

<style lang="scss" scoped>
.loading1 {
  padding: 10px;
  width: 200px;
  height: 200px;
  .concentric-round {
    width: 50px;
    height: 50px;
    position: relative;
  }
  .concentric-round::before,
  .concentric-round::after {
    content: '';
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    background: v-bind(Color);
    opacity: 0.4;
    border-radius: 100%;
  }
  .concentric-round::before {
    width: 70%;
    height: 70%;
    animation: before_round 0.6s ease-in-out infinite alternate;
  }
  .concentric-round::after {
    width: 100%;
    height: 100%;
    animation: after_round 0.6s ease-in-out infinite alternate;
  }
  @keyframes before_round {
    0% {
      transform: translate3d(-50%, -50%, 0) scale(0.7);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) scale(1);
    }
  }
  @keyframes after_round {
    0% {
      transform: translate3d(-50%, -50%, 0) scale(1.3);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) scale(1);
    }
  }
}
.loading2 {
  padding: 10px;
  width: 200px;
  height: 200px;
  .circle {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 3.8px solid v-bind(RgbaColor);
    border-top-color: v-bind(Color);
    animation: chrys 1.5s ease-in-out infinite;
  }
  @keyframes chrys {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
